<template>
    <ex-dialog
      width="840px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
    >
      <div class="main" v-loading="loading">
        <template>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm" :inline="true">
            <el-form-item label="直播时间：" prop="">
              <el-form-item label="" prop="startTime">
                <el-time-select placeholder="开始时间" v-model="ruleForm.startTime" :picker-options="{start: '00:00',step: '01:00',end: '23:00'}" :style="{width: inputWidth}"></el-time-select>
              </el-form-item>
              <span style="margin-right: 10px">-</span>
              <el-form-item label="" prop="endTime">
                <el-time-select placeholder="结束时间" v-model="ruleForm.endTime" :picker-options="{start: '00:00',step: '01:00',end: '23:00'}" :style="{width: inputWidth}"></el-time-select>
              </el-form-item>
            </el-form-item>
          </el-form>
        </template>
      </div>
      <div class="button_box">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')">确认</el-button>
      </div>
    </ex-dialog>
  </template>
  <script>
    import Loading from "@/components/Loading/index";
    // api
    import {
      addRoomSession,roomSessionDetail,editRoomSession
    } from "@/api/customer/setting";
    export default {
      components: {
        Loading,
      },
      props: {
        visible: Boolean,
        id: String,
        pathType: String,
      },
      data() {
        return {
          labelWidth: "120px",
          inputWidth: "220px",
          title: "",
          loading: false,
          disabled: false,
          AgreeLoading: false,
          ruleForm: {
            id:'',
            startTime:'',//直播开始时间
            endTime:'',//直播结束时间
          },
          rules: {
            startTime: [
              { required: true,message: "请选择开始时间",trigger: ["change", "bulr"]}
            ],
            endTime: [
              { required: true,message: "请选择结束时间",trigger: ["change", "bulr"]}
            ],
          },
        };
      },
      computed: {},
      created() {
        if(this.pathType=='edit'){
          this.title = '编辑直播场次'
          this.getDetail()
        }else{
          this.title = '新增直播场次'
        }
      },
      mounted() {
      
      },
      computed: {},
      methods: {
        //获取详情
        getDetail(){
          var id = this.id
          this.loading = true
          roomSessionDetail(id).then( res => {
            this.ruleForm = res.result
            this.loading = false
          }).catch(()=>{
            this.loading = false
          })
        },
        //取消
        handleClose(formName) {
          this.$emit("update:visible", false);
        },
        submitForm(formName) {
          //创建确定
          this.$refs[formName].validate(valid => {
            if (valid) {
              this.AgreeLoading = true
              var data = {
                ...this.ruleForm
              }
              if(this.pathType == 'add'){
                addRoomSession(data).then(res => {
                  this.handleClose()
                  this.$message.success('保存成功')
                  this.$emit('success')
                  this.AgreeLoading = false
                }).catch(()=>{
                  this.AgreeLoading = false
                })
              }else if(this.pathType == 'edit'){
                editRoomSession(data).then(res => {
                  this.handleClose()
                  this.$message.success('修改成功')
                  this.$emit('success')
                  this.AgreeLoading = false
                }).catch(()=>{
                  this.AgreeLoading = false
                })
              }
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
      }
    };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .el-select,.el-input,.el-cascader{
    width: 400px;
  }
  .main {
    padding: 20px 20px;
  }
  .button_box{
    display: flex;
    justify-content: center;
  }
  .list_box{
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 0;
    margin-bottom: 20px;
  }
  .addService{
    width: 540px;
    height: 30px;
    background-color: #1890ff;
    border-radius: 6px;
    color: #FFFFFF;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
  .addService:hover{
    opacity: 0.8;
  }
  .delete_box{
    color: #fc3131;
    width: 100%;
    text-align: right;
    padding: 10px 20px 0 0;
  }
  .delete_box span{
    cursor: pointer;
  }
  .delete_box span:hover{
    opacity: 0.8;
  }
  </style>
  